<template>
  <view>
    <qiun-data-charts
      type="map"
      :canvas2d="true"
      :opts="config"
      canvasId="mapma"
      :chartData="chartsDataMaps"
      tooltipFormat="tooltipFun"
      @getIndex="getIndex"
    />
  </view>
</template>
    
<script>
import mapdata from "@/common/chinaMap.json";
import uCharts from "@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js";

export default {
  name: "mapChina",
  data() {
    return {
      chartsDataMaps: {
        series: [],
      },
      // 覆盖的是 option
      config: {
        extra: {
          map: {
            mercator: true,
          },
        },
      },
    };
  },

  created() {
    //@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js 更详细配置的查看此处

    // 文档可看 https://ext.dcloud.net.cn/plugin?id=271

    //https://demo.ucharts.cn/#/  在线生成工具 配置代码config-ucharts.js内容

    uCharts.map = {
      type: "map",
      canvasId: "",
      canvas2d: true,
      background: "none",
      animation: true,
      timing: "easeOut",
      duration: 1000,
      color: ["#FFFFF0"],
      padding: [0,0, 0,0,],
      fontSize: 8,
      rotate: false,
      errorReload: true,
      fontColor: "#666666",
      enableScroll: false,
      touchMoveLimit: 60,
      enableMarkLine: false,
      dataLabel: true,
      dataPointShape: true,
      dataPointShapeType: "solid",
      tapLegend: true,
      extra: {
        map: {
          border: true,
          mercator: false,
          borderWidth: 1,
          borderColor: "#666666",
          fillOpacity: 0.6,
          activeBorderColor: "#ccc",
          activeFillColor: "#FFFFF0", //设置 鼠标 悬停 地图展示的背景颜色
          activeFillOpacity: 1,
        },

        tooltip: {
          showBox: true,
          showArrow: true,
          showCategory: false,
          borderWidth: 0,
          borderRadius: 0,
          borderColor: "#000000",
          borderOpacity: 0.7,
          bgColor: "#000000",
          bgOpacity: 0.7,
          gridType: "solid",
          dashLength: 4,
          gridColor: "#CCCCCC",
          fontColor: "#FFFFFF",
          splitLine: true,
          horizentalLine: false,
          xAxisLabel: false,
          yAxisLabel: false,
          labelBgColor: "#FFFFFF",
          labelBgOpacity: 0.7,
          labelFontColor: "#666666",
        },
      },
    };

    //模拟从服务器获取数据
    this.getServerData();
  },
  methods: {
    //模拟从服务器获取数据
    getServerData() {
      //因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
      //开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
      console.log(mapdata);
      this.chartsDataMaps.series = mapdata.features;
    },

    // 根据条件添加颜色
    addColor(count) {},
    //鼠标点击地图 会触发该事件
    getIndex(e) {
      // 点击地图进行操作
      this.$emit("chartsDataMaps", mapdata.features[e.currentIndex]);
    },
  },
};
</script>
    
<style lang="less"></style>
    
    <!-- 3.chinaMap.json需要自己去 http://datav.aliyun.com/tools/atlas/下载
         4.关于二级省市的数据，我选择直接去请求
    
    uni.request({
        url:`https://geo.datav.aliyun.com/areas_v2/bound/${data.properties.adcode}_full.json`, //仅为示例，并非真实接口地址。
        success: (res) => {
        console.log(res)
        console.log(111)
            this.chartsDataMapa.series = res.data
            console.log(this.chartsDataMapa)
            // this.chinaCityType = true
        },
        fail(reg) {
            console.log(reg)
            }
        });
     -->
